<template>
  <section class="no-print">
    <el-form
      label-width="10rem"
      ref="initializeForm"
      :model="costData"
      :loading="loading"
      :rules="rules"
    >
      <el-form-item label="退宿(自离)日期" prop="outDate">
        <el-date-picker
          v-model="costData.outDate"
          align="right"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions1"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="costData.name" @blur="getBedInfo(costData.name)"></el-input>
      </el-form-item>
      <!-- <el-form-item label="工号" prop="jobNumber">
        <el-input v-model="costData.jobNumber" @blur="getBedInfo(costData.jobNumber)"></el-input>
      </el-form-item>-->
      <!-- TODO: -->
      <el-form-item label="身份证号码" prop="_sfz">
        <el-select
          v-model="costData.sfz"
          placeholder="请选择"
          :disabled="sfzDisabled"
          @change="sfzChange(costData.sfz)"
        >
          <el-option v-for="item in sfz" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工号" prop="jobNumber">
        <el-input v-model="costData.jobNumber" disabled></el-input>
      </el-form-item>
      <el-form-item label="部门" prop="department">
        <el-input v-model="costData.department" disabled></el-input>
      </el-form-item>
      <el-form-item label="入住位置" prop="position">
        <el-input v-model="costData.position" disabled></el-input>
      </el-form-item>
      <el-form-item label="当前冷水表" prop="cold">
        <el-input v-model.number="costData.cold"></el-input>
      </el-form-item>
      <el-form-item label="当前热水表" prop="hot">
        <el-input v-model.number="costData.hot"></el-input>
      </el-form-item>
      <el-form-item label="当前电表" prop="electric">
        <el-input v-model.number="costData.electric"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" @click.native="resettingSubmit('initializeForm')">重置</el-button>
        <el-button type="success" @click.native="calcSubmit">费用计算</el-button>
        <el-button type="primary" @click.native="leadingInSubmit">导入</el-button>
        <el-button type="primary" @click.native="dayinSubmit">打印</el-button>
      </el-form-item>
    </el-form>

    <!-- 计算结果 -->
    <el-table id="print" :data="tableData" style="width: 100%" v-loading="Loading">
      <el-table-column align="center" label="区域名称" prop="affiliation" fixed min-width="150"></el-table-column>
      <el-table-column align="center" label="宿舍楼名称" prop="dorm" min-width="100"></el-table-column>
      <el-table-column align="center" label="房间号" prop="room" min-width="50"></el-table-column>
      <el-table-column align="center" label="工号" prop="jobNumber" min-width="100"></el-table-column>
      <el-table-column align="center" label="姓名" prop="name" min-width="100"></el-table-column>
      <el-table-column align="center" label="冷水费" prop="coldCost" min-width="100">
        <template slot-scope="scope">
          <!-- <div>{{scope.row.roomType}}</div> -->
          <div>{{ roundNumber(scope.row.coldCost) }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="热水费" prop="hotCost" min-width="100">
        <template slot-scope="scope">
          <!-- <div>{{scope.row.roomType}}</div> -->
          <div>{{ roundNumber(scope.row.hotCost) }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="电费" prop="electricCost" min-width="100">
        <template slot-scope="scope">
          <!-- <div>{{scope.row.roomType}}</div> -->
          <div>{{ roundNumber(scope.row.electricCost) }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="公共冷水费" prop="avgColdCost" min-width="100">
        <template slot-scope="scope">
          <!-- <div>{{scope.row.roomType}}</div> -->
          <div>{{ roundNumber(scope.row.avgColdCost) }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="公共热水费" prop="avgHotCost" min-width="100">
        <template slot-scope="scope">
          <!-- <div>{{scope.row.roomType}}</div> -->
          <div>{{ roundNumber(scope.row.avgHotCost) }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="公共电费" prop="avgElectricCost" min-width="100">
        <template slot-scope="scope">
          <!-- <div>{{scope.row.roomType}}</div> -->
          <div>{{ roundNumber(scope.row.avgElectricCost) }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="合计" prop="totalCost" min-width="100">
        <template slot-scope="scope">
          <!-- <div>{{scope.row.roomType}}</div> -->
          <div>{{ roundNumber(scope.row.totalCost) }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="入住天数" prop="singleDay" min-width="100"></el-table-column>
    </el-table>
  </section>
</template>
<script>
import { bedInfo } from "../../api/inOut.js";
import { singleCost, importSingleCost } from "../../api/cost.js";
import printJs from "print-js";
// import Print from "vue-print-nb";
export default {
  data() {
    return {
      costData: {
        jobNumber: null,
        name: null,
        department: null,
        cold: null,
        hot: null,
        electric: null,
        outDate: null,
        position: null,
        _outDate: null,
        sfz: null
      },
      tableData: [
        {
          affiliation: "",
          dorm: "",
          room: "",
          jobNumber: "",
          name: "",
          coldCost: "",
          hotCost: "",
          electricCost: "",
          avgColdCost: "",
          avgHotCost: "",
          avgElectricCost: "",
          totalCost: "",
          singleDay: "",
          cold: 0,
          hot: 0,
          electric: 0
        }
      ],
      loading: false,
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      Loading: false,
      // 规则
      rules: {
        jobNumber: [{ required: true, message: "请输入工号", tirgger: "blur" }],
        outDate: [
          {
            required: true,
            type: "date",
            message: "请选择退宿时间",
            tirgger: "change"
          }
        ],
        name: [
          {
            type: "string"
            // message: "请输入当前冷水表",
            // tirgger: "blur"
          }
        ],
        jobNumber: [
          {
            type: "string"
            // message: "请输入当前冷水表",
            // tirgger: "blur"
          }
        ],
        position: [
          {
            type: "string"
            // message: "请输入当前冷水表",
            // tirgger: "blur"
          }
        ],
        cold: [
          {
            required: true,
            type: "number",
            message: "请输入当前冷水表",
            tirgger: "blur"
          }
        ],
        hot: [
          {
            required: true,
            type: "number",
            message: "请输入当前热水表",
            tirgger: "blur"
          }
        ],
        electric: [
          {
            required: true,
            type: "number",
            message: "请输入当前点表",
            tirgger: "blur"
          }
        ]
      },
      transTime: "",
      sfz: [],
      sfzDisabled: true,
      searchResult: null
      // meter: {}
    };
  },
  methods: {
    // 重置
    resettingSubmit(formName) {
      this.$refs[formName].resetFields();
    },
    // 获取住宿信息
    getBedInfo(name) {
      bedInfo(name).then(res => {
        if (res) {
          // 填充信息
          this.costData.jobNumber = null;
          this.costData.department = null;
          this.costData.position = null;
          this.costData.sfz = null;
          let result = res.msg;
          /**
           *  返回记录若只有1条,进行填充
           *  若返回记录有多条，则进行选择
           */
          this.sfz = [];
          if (result.length === 1) {
            // 单条记录直接进行填充
            this.sfzDisabled = true;
            this.costData = Object.assign(this.costData, result[0][0]);
            this.costData.position =
              result[0][0].affiliation +
              "——" +
              result[0][0].dorm +
              "——" +
              result[0][0].floor +
              "层——" +
              result[0][0].room +
              "房——" +
              result[0][0].berth +
              "床";
          } else if (result.length > 1) {
            // 多条记录需要进行下拉框选择
            this.searchResult = result;
            for (let i = 0; i < result.length; i++) {
              let _sfz = { value: i, label: result[i][0].sfz };
              this.sfz.push(_sfz);
            }
            this.sfzDisabled = false;
          }
        } else {
          this.resettingSubmit("initializeForm");
        }
      });
    },
    // 费用计算
    calcSubmit() {
      // this.transTime();
      this.Loading = true;
      // 记录表
      singleCost(this.costData).then(res => {
        this.Loading = false;
        if (res) {
          this.tableData[0] = Object.assign(
            this.tableData[0],
            res.msg,
            this.costData
          );
        }
      });
    },
    // 导入
    leadingInSubmit() {
      // 将该条记录导入数据库
      this.Loading = true;
      importSingleCost(this.tableData[0], this.meter).then(res => {
        this.Loading = false;
        if (res) {
          this.$alert(res.msg, "系统消息", {
            confirmButtonText: "确定"
            // callback:
          });
        }
      });
    },
    // TODO: 打印
    dayinSubmit() {
      // window.print();
      // let v = document.createElement("div");
      //向v中追加打印数据，可以将界面的元素追加进来
      let h = window.open("打印窗口", "_blank");
      h.document.write(
        `<table style="text-align:center" border='1px'>
      <thead>
        <th>区域名称</th>
        <th>宿舍楼名称</th>
        <th>房间号</th>
        <th>工号</th>
        <th>姓名</th>
        <th>冷水费</th>
        <th>热水费</th>
        <th>电费</th>
        <th>公共冷水费</th>
        <th>公共热水费</th>
        <th>公共电费</th>
        <th>合计</th>
        <th>入住天数</th>
      </thead>
      <tbody>
        <tr>
          <td>` +
          this.tableData[0]["affiliation"] +
          `</td>
          <td>` +
          this.tableData[0]["dorm"] +
          `</td>
          <td>` +
          this.tableData[0]["room"] +
          `</td>
          <td>` +
          this.tableData[0]["jobNumber"] +
          `</td>
          <td>` +
          this.tableData[0]["name"] +
          `</td>
          <td>` +
          this.tableData[0]["coldCost"] +
          `</td>
          <td>` +
          this.tableData[0]["hotCost"] +
          `</td>
          <td>` +
          this.tableData[0]["electricCost"] +
          `</td>
          <td>` +
          this.tableData[0]["avgColdCost"] +
          `</td>
          <td>` +
          this.tableData[0]["avgHotCost"] +
          `</td>
          <td>` +
          this.tableData[0]["avgElectricCost"] +
          `</td>
          <td>` +
          this.tableData[0]["totalCost"] +
          `</td>
          <td>` +
          this.tableData[0]["singleDay"] +
          `</td>
        </tr>
      </tbody>
    </table>`
      );
      h.document.close();
      h.print();
      h.close();
    },
    roundNumber(val) {
      if (!val) {
        return 0;
      }
      return parseFloat(val).toFixed(2);
    },
    sfzChange(sfz) {
      this.costData = Object.assign(this.costData, this.searchResult[sfz][0]);
      this.costData.position =
        this.searchResult[sfz][0].affiliation +
        "——" +
        this.searchResult[sfz][0].dorm +
        "——" +
        this.searchResult[sfz][0].floor +
        "层——" +
        this.searchResult[sfz][0].room +
        "房——" +
        this.searchResult[sfz][0].berth +
        "床";
    }
  },
  mounted() {}
};
</script>
<style lang="">
.form {
  width: 50rem;
}
</style>